<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
    <script src="https://lib.baomitu.com/echarts/latest/echarts.js"></script>
    <style>
      *{
        margin:0;
        padding:0;
      }
    </style>
  </head>
  <body>
     <div id="main" style="width:800px;height:400px"></div>
     <script>
        let div1 = document.querySelector('#main');
        let myCharts1 = echarts.init(div1)
        let data = [
           ["电影",10,22,"a",10],
           ["电视",12,55,"b",60],
           ["直播",16,44,"c",50],
           ["饮食",19,32,"d",70],
        ]
        myCharts1.setOption({
            dataset:{
               source:data
            },
            title:{
               text:'主标题',
               subtext:'副标题',
               textStyle:{
                  color:'blue'
               },
               left:'center',
            },
            xAxis:{
               data:['电影','电视','直播','饮食']
            },
            yAxis:{
               //显示y轴的线
               axisLine:{
                  show:true
               },
               // y轴刻度
               axisTick:{
                  show:true
               },
            },
            series:[  // 绘制什么样的图表 数据展示在这里设置  bar 柱状图  line 折线图   pie 饼图
               {
                 type:'bar',
                // data:[10,20,30,40],
                 color:'red',
                 encode:{
                    y:1,  // 代表数据用的二维数组里 索引为 1 的那些数据
                 }
               },
               {
                 type:'line',
                 //data:[10,20,60,40],
                 color:'yellow',
                 encode:{
                    y:2,  // 代表数据用的二维数组里 索引为 1 的那些数据
                 }
               },
               {
                 type:'pie',
                //  data:[
                //     {
                //       name:'a',
                //       value:10,
                //     },
                //     {
                //       name:'b',
                //       value:30,
                //     },
                //     {
                //       name:'c',
                //       value:44,
                //     },
                //     {
                //       name:'d',
                //       value:22,
                //     },
                //   ],
                 color:'green',
                 width:200,
                 height:200,
                 left:150,
                 top:100,
                 radius:25, // 饼图的半径
                 encode:{
                    itemName:3,  //  itemName 饼图旁边的文字  是对应索引为3的数据
                    value:4      //  二维数组里 索引为4 的数据
                 }
               },
            ],
        })
     </script>
  </body>
</html>
